<template>
	<view >
	<view class="order-goods">
		<view v-for="(item, index) in list" :key="index" class="item-wrap">
		    <view class="item flex">
		        <view class="goods-img" style="position: relative;">
		            <u-image width="180rpx" border-radius="10rpx" height="180rpx" lazy-load
		                :src="item.image_str || item.image"></u-image>
		        </view>
		        <view class="goods-info m-l-20 flex-1">
		            <view class="goods-name line-2 m-b-10">
		                <u-tag class="m-r-10" v-if="item.people_num" :text="item.people_num + '人团'" size="mini"
		                    type="primary" mode="plain" />
		                {{item.goods_name || item.name}} 
		            </view>
		            <view class="goods-spec xs muted m-b-20">{{item.spec_value || item.spec_value_str}}</view>
		            <view class="flex row-between">
		                <view class="goods-price ">
		                    <view class="primary flex">
		                        <price-format weight="500" :subscript-size="24" :first-size="32" :second-size="24"
		                            :price="item.goods_price" />
		                        <!-- 会员价 -->
		                        <view class="vip-price flex" v-if="item.goods_type>=1">
		                            <view class="price-name xxs">定金</view>
		                            <view style="padding: 0 10rpx">
		                                <price-format :price="item.price" :first-size="22" :second-size="22"
		                                    :subscript-size="22" :weight="500" color="#7B3200" />
		                            </view>
		                        </view>
		                    </view>
		                </view>
		                <view class="goods-num sm ">x{{item.num || item.goods_num || item.count}}</view>
		            </view>
		        </view>
		    </view>
			<view class="fenyong" v-for="(item1,index) in item.distribution_list">
				<view class="fens flex-s">
					<view class="fens_l">{{item1.level_name}}</view>
					<view class="fens_r">{{item1.statusDesc||'无'}}</view>
				</view>			
				<view class="fenx flex-s">
					<view class=" flex-start">
						<image class="fenimg" :src="item1.user_info.avatar" mode=""></image>
						<view class="fenx_l">{{item1.user_info.nickname||'无'}}</view>
					</view>
					<view class="fenx_r">{{item1.money||'无'}}</view>
				</view>
			</view>
		</view>
	</view>
	<view class="price contain">
		<view class="flex row-between">
			<view>商品金额</view>
			<view class="black">
				<price-format :price="orderDetail.goods_price"></price-format>
			</view>
		</view>
		<view class="flex row-between" v-if="orderDetail.final_status!=0">
			<view>尾款金额</view>
			<view class="black">
				<price-format :price="orderDetail.final_amount"></price-format>
			</view>
		</view>
		<view class="flex row-between">
			<view>运费</view>
			<view class="black">+
				<price-format :price="orderDetail.shipping_price"></price-format>
			</view>
		</view>
		<view v-if="orderDetail.discount_amount != 0" class="flex row-between">
			<view>优惠券</view>
			<view class="primary">-
				<price-format :price="orderDetail.discount_amount"></price-format>
			</view>
		</view>
		<view v-if="orderDetail.member_amount" class="flex row-between">
			<view>会员抵扣</view>
			<view class="primary">-
				<price-format :price="orderDetail.member_amount"></price-format>
			</view>
		</view>
		<view class="flex row-right">
			<view class="lighter">实付金额：</view>
			<view class="primary xl">
				<price-format weight="500" :first-size="34" :second-size="34"
					:price="orderDetail.order_amount"></price-format>
			</view>
		</view>
	</view>
	<view class="order-info contain">
		<view class="item flex">
			<view class="title">订单编号</view>
			<view class="black">{{orderDetail.order_sn}}</view>
		</view>
		<view class="item flex">
			<view class="title">订单类型</view>
			<view class="black">{{orderDetail.order_type}}</view>
		</view>
		<view class="item flex">
			<view class="title">支付方式</view>
			<view class="black">{{orderDetail.pay_way}}</view>
		</view>
		<view class="item flex">
			<view class="title">下单时间</view>
			<view class="black">{{orderDetail.create_time}}</view>
		</view>
		<view v-if="orderDetail.pay_time" class="item flex">
			<view class="title">付款时间</view>
			<view class="black">{{orderDetail.pay_time}}</view>
		</view>
		<view v-if="orderDetail.shipping_time" class="item flex">
			<view class="title">发货时间</view>
			<view class="black">{{orderDetail.shipping_time }}</view>
		</view>
		<view v-if="orderDetail.confirm_take_time" class="item flex">
			<view class="title">成交时间</view>
			<view class="black">{{orderDetail.confirm_take_time }}</view>
		</view>
		<view v-if="orderDetail.cancel_time" class="item flex">
			<view class="title">关闭时间</view>
			<view class="black">{{orderDetail.cancel_time}}</view>
		</view>
	
	</view>
	</view>
</template>

<script>
	import {
		distributionnew
	} from "@/api/user";
	export default {
		data() {
			return {
				id:'',
				list:[],
				orderDetail:[],
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdistributionnew()
		},
		methods: {
			async getdistributionnew(){
				const {
					data,
					code,
					msg
				} = await distributionnew({
					id: this.id
				})
				if (code == 1) {
					this.list = data.order_goods
					this.orderDetail = data
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		margin: 20rpx;
		padding: 10rpx 20rpx;
		border-radius: 14rpx;
		background-color: #fff;
	}

	.fenimg{
		width: 46rpx;
		height: 46rpx;
		border-radius: 50rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}
	.fenyong{
		color: #999999;
		margin: 0rpx 20rpx;
		padding: 10rpx 0;
		border-bottom: #e8e8e8 solid 1rpx;
	}
    .order-goods {
		background-color: #fff;
		margin: 20rpx;
        .item {
            padding: 20rpx 24rpx;

            .vip-price {
                margin: 0 10rpx;
                background-color: #FFE9BA;
                line-height: 30rpx;
                border-radius: 6rpx;
                overflow: hidden;

                .price-name {
                    background-color: #101010;
                    padding: 3rpx 10rpx;
                    color: #FFD4B7;
                    position: relative;
                    overflow: hidden;

                    &::after {
                        content: '';
                        display: block;
                        width: 20rpx;
                        height: 20rpx;
                        position: absolute;
                        right: -15rpx;
                        background-color: #FFE9BA;
                        border-radius: 50%;
                        top: 50%;
                        transform: translateY(-50%);
                        box-sizing: border-box;
                    }
                }
            }
        }

        .goods-footer {
            height: 70rpx;
            align-items: flex-start;
            padding: 0 24rpx;

            .plain {
                border: 1px solid #999;
                height: 52rpx;
                line-height: 52rpx;
                font-size: 26rpx;
            }
        }
    }
	.cover{
		width: 180rpx;
		height: 52rpx;
		background: rgba( 0,0,0,0.4);
		position: absolute;
		bottom: 0;
		color: #fff;
		text-align: center;
		line-height: 52rpx;
	}
	.contain .row-between,
	.contain .item{
		padding: 12rpx 0;
	}
	.title{
		margin-right: 56rpx;
	}
</style>
